<template>
	<view :data-theme="theme">
		<view class="container">
			<!-- 左侧一级栏 -->
			<view class="sidebar">
				<view class="sidebar-item" :class="{ active: activeSidebar === index }"
					v-for="(item, index) in sidebarList" :key="index" @click="switchSidebar(index)">
					{{ item }}
				</view>
			</view>

			<!-- 右侧二级栏对应的内容 -->
			<view class="content" style="width: 70%;">
				<view v-if="activeSidebar === 0">
					<view class="warehouse" v-for="(warehouse, index) in depotData" :key="index">
						<view class="item" style="display: flex;justify-content: space-between;"
							@click="goWarehouse(warehouse,1,'today')">
							{{warehouse.depotName}}
							<span style="color: #007aff;">去打印</span>
						</view>
					</view>
				</view>
				<view v-if="activeSidebar === 1">
					<view class="warehouse" v-for="(warehouse, index) in depotData" :key="index">
						<view class="item" style="display: flex;justify-content: space-between;"
							@click="goWarehouse(warehouse,1,'tomorrow')">
							{{warehouse.depotName}}
							<span style="color: #007aff;">去打印</span>
						</view>
					</view>
				</view>
				<view v-if="activeSidebar === 2">
					<view class="warehouse" v-for="(warehouse, index) in depotData" :key="index">
						<view class="item" style="text-align: center;" @click="goWarehouse(warehouse,2)">
							{{warehouse.depotName}}
						</view>
					</view>
				</view>
				<view class="sign" v-if="activeSidebar === 3">
					<!-- 空白标签 -->
					<view class="sign_item">
						<view class="signHeader">
							<view>是否打印换品空白标签</view>
							<!-- <u-switch v-model="queryData.isPrintBlankLabel" @change="blankSignChange"></u-switch> -->
							<switch :checked="queryData.isPrintBlankLabel" @change="blankSignChange" style="transform:scale(0.7)"/>
						</view>
						<view class="signCenter">
							打印换品标签将帮助您快速分割标签，防止标签分割错误引发的错货缺货
						</view>
						<view class="signFooter">
							<image style="max-width: 100%;max-height: 100%;object-fit: contain;"
								src="../users/static/images/blankSign.png" mode=""></image>
						</view>
					</view>
					<!-- 仓库标签 -->
					<view class="sign_item">
						<view class="signHeader">
							<view>是否打印仓库名称标签</view>
							<!-- <u-switch v-model="queryData.isPrintProducerInfo" @change="warehouseSignChange"></u-switch> -->
							<switch :checked="queryData.isPrintProducerInfo" @change="warehouseSignChange" style="transform:scale(0.7)"/>
						</view>
						<view class="signCenter">
							如果您同时配送多仓,标签打印仓库名称,可以帮助您的员工快速识别商品所属仓库
						</view>
						<view class="signFooter">
							<image style="max-width: 100%;max-height: 100%;object-fit: contain;"
								src="../users/static/images/warehouseSign.png" mode=""></image>
						</view>
					</view>
					<!-- 散装标签 -->
					<view class="sign_item">
						<view class="signHeader">
							<view>是否打印散装食品生产信息</view>
							<!-- <u-switch v-model="queryData.isPrintProduceInfo" @change="buklSignChange"></u-switch> -->
							<switch :checked="queryData.isPrintProduceInfo" @change="buklSignChange" style="transform:scale(0.7)"/>
						</view>
						<view class="signCenter">
							适用于散装食品,开启后需要按商品设置是否打印生产信息
						</view>
						<view class="signFooter">
							<image style="max-width: 100%;max-height: 100%;object-fit: contain;"
								src="../users/static/images/inBulkSIgn.png" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 打印容器码 -->
				<view v-if="activeSidebar === 4">
					<view class="warehouse" v-for="(warehouse, index) in depotData" :key="index">
						<view class="item" style="text-align: center;" @click="goContainerCode(warehouse)">
							{{warehouse.depotName}}
						</view>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import UniSection from '@/components/uni/uni-swipe-action/uni-swipe-action.vue';
	import {
		setThemeColor,
	} from '../../utils/setTheme';
	import {
		getLabelApi,
		modifyLabelSetUpApi,
		queryDepotInformationApi,
		queryLabelSetUpApi,
	} from "@/api/labelPrinting.js"
	let app = getApp();
	export default {
		components: {
			'uni-section': UniSection,
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				// ------------------------>
				activeSidebar: 0, // 当前选中的一级栏索引
				sidebarList: ["无销量打印", "标签设置", "打印容器码"], // 一级栏列表
				day: '',
				tomorrow: "",
				afterTomorrow: '',
				depotForm: {
					limit: 10,
					page: 1,
				},
				depotData: [], //仓库信息
				
				// 查询标签仓库的params参数
				labelParams: {
					current: 1,
					size: 10,
					isPrint: 0, //0未打印，1:已打印
					appTime:'today',//today今天, tomorrow明天
				},
				// 仓库的id
				warehouseDepotId: '',
				// -----打印机标签
				queryData: {}, // 获取标签设置项
				signParams: {}, // 修改标签设置项

			}
		},
		created() {
			this.dateHandle()
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});

			this.getDepot();
			this.queryLabel();
		},

		methods: {
			// 左侧标题
			switchSidebar(index) {
				uni.showLoading({
					title: '加载中...',
					mask: true // 是否显示透明蒙层
				});
				this.activeSidebar = index;
				// 长时间耗时的操作
				setTimeout(() => {
					uni.hideLoading(); // 隐藏加载中提示框
				}, 1000)
			},
			//仓库信息
			getDepot() {
				queryDepotInformationApi(this.depotForm).then((res) => {
					let depot = res.data.list
					this.depotData = depot.map(obj => {
						const {
							createMemberName,
							depotAddress,
							depotTelephone,
							updatedMemberName,
							zoneId,
							...rest
						} = obj; //删除部分属性
						return rest
					}); //要删除的数据的数组
				})
			},
			// 关于标签的
			// 查询标签设置项
			async queryLabel() {
				let res = await queryLabelSetUpApi();
				this.queryData = res.data;
				if(this.queryData != null){
					if (this.queryData.isPrintBlankLabel == 1) {
						this.queryData.isPrintBlankLabel = false;
					} else {
						this.queryData.isPrintBlankLabel = true;
					};
					if (this.queryData.isPrintProducerInfo == 1) {
						this.queryData.isPrintProducerInfo = false;
					} else {
						this.queryData.isPrintProducerInfo = true;
					};
					if (this.queryData.isPrintProduceInfo == 1) {
						this.queryData.isPrintProduceInfo = false;
					} else {
						this.queryData.isPrintProduceInfo = true;
					}
				}
				
			},
			//修改标签设置项
			changeQueryLabel() {
				modifyLabelSetUpApi(this.signParams).then((res) => {})
			},
			// 空白标签的开关
			blankSignChange(e) {
				if (e) {
					this.signParams.isPrintBlankLabel = 0;
					this.changeQueryLabel();
				} else {
					this.signParams.isPrintBlankLabel = 1
					this.changeQueryLabel();
				}
			},
			// 仓库名称的开关
			warehouseSignChange(e) {
				if (e) {
					this.signParams.isPrintProducerInfo = 0;
					this.changeQueryLabel();
				} else {
					this.signParams.isPrintProducerInfo = 1
					this.changeQueryLabel();
				}
			},
			// 散装标签的开关
			buklSignChange(e) {
				if (e) {
					this.signParams.isPrintProduceInfo = 0;
					this.changeQueryLabel();
				} else {
					this.signParams.isPrintProduceInfo = 1;
					this.changeQueryLabel();
				}
			},
			// 获取今日时间
			dateHandle() {
				// 获取当前时间
				const now = new Date();
				
				// 获取今天日期，格式为：月-日
				const month = now.getMonth() + 1;
				const day = now.getDate();
				const today = `${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
				
				// 获取明天日期，使用 setDate() 函数
				const tomorrow = new Date(now);
				tomorrow.setDate(now.getDate() + 1);
				const month1 = tomorrow.getMonth() + 1;
				const day1 = tomorrow.getDate();
				const tomorrow1 = `${month1 < 10 ? '0' + month1 : month1}-${day1 < 10 ? '0' + day1 : day1}`;
				this.sidebarList.unshift(today, tomorrow1)
			},

			// 不同仓库的点击事件
			async goWarehouse(warehouse, sale) {
				this.warehouseDepotId = warehouse.depotId;
				if (this.activeSidebar == 0) {
					// 赋值给开始时间以及结束时间
					this.labelParams.beginTime = this.day;
					this.labelParams.endTime = this.tomorrow;
					this.labelParams.appTime = 'today';
				}
				if (this.activeSidebar == 1) {
					this.labelParams.beginTime = this.tomorrow;
					this.labelParams.endTime = this.afterTomorrow;
					this.labelParams.appTime = 'tomorrow';
				}
				
				// 路由跳转传递参数
				this.goPage(`/pages/labelPrinting/print/print?data=${JSON.stringify({
    warehouseDepotId: this.warehouseDepotId,
    date: this.labelParams.beginTime,
	appTime:this.labelParams.appTime,
	warehouseName:warehouse.depotName,sale:sale})}`)
			},

			// 打印容器码页面
			goContainerCode(ele) {
				// console.log(ele)
				this.goPage('/pages/labelPrinting/containerCode/containerCode?item=' + JSON.stringify(ele))
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},

		},


	}
</script>

<style scoped lang="scss">
	// 动态颜色
	.bg_color {
		@include main_bg_color(theme);
	}

	page {
		display: flex;
		height: 100%;
		flex-direction: column;
		// overflow: hidden;

		.container {
			display: flex;
			height: 100%;
			flex-direction: row;
			// overflow: hidden;

			.header_nav {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50px;
			}

			.sale_number {


				.sale_date {
					margin: 20px;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.date_tag {
						background-color: #eee;
						padding: 10px 30px;
					}

					.selected {
						/* 设置选中标签的样式 */
						color: red;
					}
				}



			}

			.sign {
				// flex: 1;
				background-color: #fff;

				.sign_item {
					background-color: white;
					border-radius: 5px;
					margin: 10rpx 0;
					background-color: #f5f5f5;


					.signHeader {
						display: flex;
						padding: 10rpx;
						font-size: 30rpx;
						font-weight: bold;
						justify-content: space-between;
					}

					.signCenter {
						line-height: 20px;
						font-weight: bolder;
					}
				}
			}

			.warehouse {
				// flex: 1;
				display: flex;
				flex-direction: column;

				.item {
					margin: 10px 20px;
					padding: 20px;
					border-radius: 10px;
					text-align: left;
					background-color: white;
					background-color: #f5f5f5;
					
				}
			}
		}
	}

	.container {
		display: flex;
		height: 100%;
	}

	.sidebar {
		flex-grow: 1;
		height: 100vh;
	}

	.sidebar-item {
		// margin: 10rpx 0;
		padding: 20px;
		cursor: pointer;
		
		position: relative;
		
		
	}

	.sidebar-item.active {
		background-color: #fff;
		@include main_color(theme);
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 6rpx;
			height: 100%;
			@include main_bg_color(theme);
		}
	}

	.content {
		flex-grow: 7;
		padding: 10px;
		background-color: #fff;
	}
</style>